@import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese');

:root {
	font-size: 20px;
	--red: #da2c4d;
	--yellow: #f8ab37;
	--green: #2ecc71;
	--white: #ffffff;
	--grey-light: #f2f7f9;
	--grey: #ecedf3;
	--black: #080808;
	--black-blue: #1f2029;
	--black-blue-light: #353746;
	--black-blue-light-2: #404255;
	--black-blue-light-3: #4b4d64;
	--black-light: #424455;
}

/* #Progress
================================================== */

.progress-wrap {
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset  0 0 0 2px rgba(255,255,255,0.2);
	z-index: 10000;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap svg path { 
	fill: none; 
}
.progress-wrap svg.progress-circle path {
	stroke: var(--grey);
	stroke-width: 4;
	box-sizing: border-box;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

/* #Cursor
================================================== */

.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
}
.cursor{
	background-color: #fff;
	z-index: 99999;
	height: 0;
	width: 0;
}
.cursor2,.cursor3{
	height: 46px;
	width: 46px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(1.4) translateX(-35%) translateY(-35%);
	transform:scale(1.4) translateX(-35%) translateY(-35%);
	border:none
}

.cursor2.hover{
	background: rgba(255,255,255,0.1);
}
.cursor2.hover .progress-wrap {
	box-shadow: inset  0 0 0 2px rgba(255,255,255,0);
}
.cursor2.hover .progress-wrap svg.progress-circle path {
	opacity: 0.4;
}














/* ---------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.nav-link {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
}

.navbar-toggler:active,
.navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

#home {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel1.jpg");
  background-position: center;
  background-size: cover;
  width: 100%;
  height: fit-content;
  padding-bottom: 50px;
}

.fa-mountain {
  font-size: 40px;
}

#logo {
  text-align: center;
  padding-top: 200px;
  color: rgba(255, 255, 255, 1);
}

#logo .fa-mountain {
  font-size: 100px;
}

#logo h1 {
  text-decoration: overline;
  font-weight: bolder;
}

#logo h2 {
  font-weight: lighter;
  font-style: italic;
}

#about {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel2.jpg");
  background-position: center;
  background-size: cover;
  width: 100%;
  height: fit-content;
  text-align: center;
  padding-bottom: 50px;
}

#aboutHotel {
  color: rgba(255, 255, 255, 1);
  padding-top: 100px;
}

#aboutHotel h2 {
  font-weight: bold;
  text-decoration: overline;
  font-style: italic;
}

#activities {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel3.jpg");
  background-position: center;
  background-size: cover;
  width: 100%;
  height: fit-content;
  text-align: center;
  padding-bottom: 50px;
}

#activity {
  color: rgba(255, 255, 255, 1);
  padding-top: 100px;
}

#activity h2 {
  font-weight: bold;
  text-decoration: overline;
  font-style: italic;
}

#activity img {
  width: 250px;
  height: 250px;
}

#gallery {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel17.jpg");
  background-position: center;
  background-size: cover;
  height: fit-content;
  width: 100%;
  text-align: center;
  color: white;
  padding-top: 100px;
}

#gallery .row {
  overflow: hidden;
}

#gallery h2 {
  text-decoration: overline;
  font-weight: bold;
  font-style: italic;
}

#img1 {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel7.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transition: linear 0.2s;
}

#img2 {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel11.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transition: linear 0.2s;
}

#img3 {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel12.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transition: linear 0.2s;
}

#img4 {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel13.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transition: linear 0.2s;
}

#img5 {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel14.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transition: linear 0.2s;
}

#img6 {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel8.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transition: linear 0.2s;
}

#img7 {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel9.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transition: linear 0.2s;
}

#img8 {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel10.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transition: linear 0.2s;
}

#img9 {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel15.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transition: linear 0.2s;
}

#img1:hover {
  background: url("../img/hotel7.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transform: scale(1.1);
  transition: linear 0.2s;
}

#img2:hover {
  background: url("../img/hotel11.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transform: scale(1.1);
  transition: linear 0.2s;
}

#img3:hover {
  background: url("../img/hotel12.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transform: scale(1.1);
  transition: linear 0.2s;
}

#img4:hover {
  background: url("../img/hotel13.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transform: scale(1.1);
  transition: linear 0.2s;
}

#img5:hover {
  background: url("../img/hotel14.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transform: scale(1.1);
  transition: linear 0.2s;
}

#img6:hover {
  background: url("../img/hotel8.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transform: scale(1.1);
  transition: linear 0.2s;
}

#img7:hover {
  background: url("../img/hotel9.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transform: scale(1.1);
  transition: linear 0.2s;
}

#img8:hover {
  background: url("../img/hotel10.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transform: scale(1.1);
  transition: linear 0.2s;
}

#img9:hover {
  background: url("../img/hotel15.jpg");
  background-position: center;
  background-size: cover;
  height: 300px;
  transform: scale(1.1);
  transition: linear 0.2s;
}

.zoom:hover .overlay {
  visibility: visible;
}

.overlay {
  position: absolute;
  top: 45%;
  left: 45%;
  visibility: hidden;
}

.overlay button {
  background: transparent;
  border: none;
  outline: none;
}

.overlay i {
  font-size: 25px;
}

#booking {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel16.jpg");
  background-position: center;
  background-size: cover;
  height: fit-content;
  width: 100%;
  text-align: center;
  padding-bottom: 100px;
}

#booking label {
  color: white;
}

.remove, .add{
  height: 38px;
  width: 38px;
  padding: 4px;
  align-items: center;
  color: white;
  cursor: pointer;
  position: absolute;
}

.remove {
  background: red;
  top: 44px;
  right: 58px;
}

.add {
  background: green;
  top: 44px;
  right: 20px;
  border-radius: 0 4px 4px 0;
}

.remove i, .add i {
  font-size: 20px;
}

#booking .col-md-2 {
  width: fit-content;
}

#booking .btn-primary {
  width: fit-content;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-control:active,
.btn-primary:active,
.form-control:focus,
.btn-primary:focus {
  box-shadow: none;
  outline: none;
}

#contact {
  background: linear-gradient(rgba(15, 15, 0, 0.7), rgba(15, 15, 0, 0.7)),
    url("../img/hotel18.jpg");
  background-position: center;
  background-size: cover;
  height: fit-content;
  width: 100%;
  text-align: center;
  color: white;
  padding-bottom: 50px;
}

#contact .fa-angle-up {
  color: white;
}

#contactus pre {
  color: white;
  font-size: 15px;
}

#contact h4 {
  color: orangered;
  text-decoration: underline;
}

#contact i {
  color: orangered;
}

#social pre {
  font-size: 35px;
}

.input-group {
  width: 75%;
  margin: 0 auto;
  float: none;
}

.modal {
  margin-top: 75px;
}

.modal button {
  position: absolute;
  top: -15px;
  right: 25px;
  border: none;
  outline: none;
  color: white;
  font-size: 50px;
}

.modal button:hover {
  color: red;
}

.modal img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}